<!-- <template>
  <div v-bind="html_binds">
    <div class="_t">
      <div class="_s"></div>
      <i v-if="pubParent.x.face === 'bubble'"
        :class="'_caret f-i f-i-caret-' + (leftIndex != null ? 'right' : rightIndex != null ? 'left' : topIndex != null ? 'down' : 'up')"></i>
    </div>
    
  </div>
</template> -->

<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import Vertical from './Vertical.vue'
  import Img from './Img.vue'

  export default {
    name: 'w-timeline-item',
    pubParentName: 'w-timeline',
    mixins: [WidgetBase],
    inject: ['providePubParent'],
    props: ['position', 'index'],
    methods: {
      html_slots() {
        let text = h('div', {
          class: 'w-timeline-item-main f-br'
        }, h('div', {
          class: 'w-timeline-item-main-text'
        }, this.$slots))
        let icon = h('div', {
          ref: 'icon',
          class: 'w-timeline-item-icon'
        }, this.$slots.icon ? h('div', {
          class: 'w-timeline-item-icon-img'
        }, this.$slots.icon()) : h('i', {
          class: 'w-timeline-item-icon-img z-default'
        }))
        return [icon, text]
      }
    },
    computed: {
      html_class() {
        return 'z-' + (this.x.position || (this.pubParent.x.vertical ? 'left' : 'bottom'))
      },
      html_props() {
        return {
          'w-index': this.x.index
        }
      }
    }
  }
</script>

<style>

</style>
